# 前言
上一章是一个基础的 CLI 工具的构建,但开发者平常最多的还是在开发业务代码,仅仅依靠 CLI 从 devops 末端去约束是远远不够的,所以一般的小团队也会从脚手架入手。
本章将以 React 为例定制一套自定义脚手架以及对之前的 CLI 进行升级。
# 自定义 React 脚手架
脚手架设计一般分为两块,一块是基础架构,一块是业务架构。
基础架构决定脚手架的技术选型、构建工具选型以及开发优化、构建优化、环境配置、代码约束、提交规范等。
业务架构则是针对业务模块划分、请求封装、权限设计等等于与业务耦合度更高的模块设计。
# 搭建基础架构
跟 CLI 一样都是从 0 搭建这个脚手架,所以起手还是初始化项目与 ts 配置。
npm init
tsx --init
@前端进阶之旅: 代码已经复制到剪贴板
如上先将 package.josn 与 tsconfig.json 生成出来,tsconfig.json 的配置项可以直接使用下面的配置或者根据自己需求重新定义。
{
"include": [
"src"
],
"compilerOptions": {
"module": "CommonJS",
"target": "es2018",
"outDir": "dist",
"noEmit": true,
"jsx": "react-jsx",
"esModuleInterop": true,
"moduleResolution": "node",
"strict": true,
"noUnusedLocals": false,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./",
"keyofStringsOnly": true,
"skipLibCheck": true,
"paths": {
"@/*": [
"./src/*"
]
}
}
}
